<!--
 * @Author: Lzx
 * @LastEditors: Lzx
 * @Date: 2021-07-07 16:46:36
 * @LastEditTime: 2022-04-23 08:36:24
 * @FilePath: /web-vue/src/views/SysOwnCenter/setting/IndividualSetting.vue
 * @Description: 个人信息设置
-->
<template>
  <div>
    <!-- 信息编辑面板 -->
    <el-row class="row-panel row-panel-first">
      <el-col>
        <el-card>
          <el-divider content-position="left">
            <h3>个人信息</h3>
          </el-divider>
          <EditUserInfo
            class="edit-user-dialog"
            ref="editUserInfo"
            @editLogic="startEdit()"
            @afterSubmit="afterEditSubmit()"
          >
            <!-- 用户信息表单：其他按钮（插槽注入） -->
            <template v-slot:otherBtn>
              <el-button
                type="warning"
                icon="el-icon-lock"
                @click="openModifyPass()"
              >
                个人密码修改
              </el-button>
            </template>
          </EditUserInfo>
        </el-card>
      </el-col>
    </el-row>
    <!-- 弹出层-个人密码修改 -->
    <el-dialog
      class="modify-pass-dialog"
      title="个人密码修改"
      :visible.sync="modifyPassVisible"
    >
      <ModifyPassword
        ref="modifyPassword"
        @afterSubmit="afterModifyPass()"
      ></ModifyPassword>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          icon="el-icon-finished"
          @click="saveModifyPass()"
          >保存
        </el-button>
        <el-button icon="el-icon-refresh-left" @click="hiddenDialog()"
          >取消
        </el-button>
      </div>
    </el-dialog>
    <!-- 隐藏组件，头部栏，用于调用注销登录接口 -->
    <Logout ref="logout" v-show="false"></Logout>
  </div>
</template>

<script>
import EditUserInfo from "../components/EditUserInfo";
import ModifyPassword from "../components/ModifyPassword";
import Logout from "@/components/Logout";

export default {
  name: "individualSetting",
  components: { EditUserInfo, ModifyPassword, Logout },

  data() {
    return {
      modifyPassVisible: false,
    };
  },

  mounted() {
    // 赋值
    this.$refs.editUserInfo.userForm.username =
      this.$store.state.userSession.username;
    this.$refs.editUserInfo.userForm.realName =
      this.$store.state.userSession.realName;
    this.$refs.editUserInfo.userForm.sex = this.$store.state.userSession.sex;
    this.$refs.editUserInfo.userForm.phone =
      this.$store.state.userSession.phone;
    this.$refs.editUserInfo.userForm.email =
      this.$store.state.userSession.email;
    this.$refs.editUserInfo.userForm.avatar =
      this.$store.state.userSession.avatar;
    this.$refs.editUserInfo.userForm2.dept = this.$store.state.userSession.dept;
    // TODO-lzx 临时增加的字段（收款码）
    this.$refs.editUserInfo.userForm.duty = this.$store.state.userSession.duty;

    this.$refs.editUserInfo.imageVisible = true;
  },

  methods: {
    // 开启编辑权限
    startEdit() {
      // 表单元素：不可用 -> 可用
      for (const key in this.$refs.editUserInfo.formDisabled) {
        if (
          Object.hasOwnProperty.call(this.$refs.editUserInfo.formDisabled, key)
        ) {
          this.$refs.editUserInfo.formDisabled[key] = false;
        }
      }
    },

    // 用户信息编辑后置处理
    afterEditSubmit() {
      // 初始化表单元素状态
      Object.assign(
        this.$refs.editUserInfo.formDisabled,
        this.$refs.editUserInfo.$options.data().formDisabled
      );
      // 提示信息
      this.$confirm(`个人信息修改成功！请重新登录`, "更新结果", {
        type: "success",
        cancelButtonText: "稍后再说",
        confirmButtonText: "确定",
      })
        .then(() => {
          this.$refs.logout.logout();
        })
        .catch(() => {});
    },

    // 打开密码修改窗口
    openModifyPass() {
      this.modifyPassVisible = true;
      // 密码修改子组件赋值（延迟执行，确保子组件初始化）
      setTimeout(() => {
        // 重置表单参数
        Object.assign(
          this.$refs.modifyPassword.userForm,
          this.$refs.modifyPassword.$options.data().userForm
        );
        // 赋值
        this.$refs.modifyPassword.userForm.usercode =
          this.$refs.editUserInfo.userForm.usercode;
        // 清除表单校验结果
        this.$refs.modifyPassword.clearFormValid();
      }, 1);
    },

    // 密码修改保存
    saveModifyPass() {
      // 调用子组件密码修改接口
      this.$refs.modifyPassword.modifyPassApi();
    },

    // 密码修改后置处理
    afterModifyPass() {
      this.hiddenDialog();
      // 提示信息
      this.$confirm(`个人登录密码修改成功！请重新登录`, "更新结果", {
        type: "success",
        cancelButtonText: "稍后再说",
        confirmButtonText: "确定",
      })
        .then(() => {
          this.$refs.logout.logout();
        })
        .catch(() => {});
    },

    // 隐藏弹窗
    hiddenDialog() {
      this.modifyPassVisible = false;
    },
  },
};
</script>

<style lang="scss"></style>
